<template>
  <div>
    <h3 style="color: red">子页面</h3>
    <div>{{ message }}</div>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      message: '这里是子组件homePage',
    }
  },
  beforeCreate: function () {
    console.group('------子组件beforeCreate创建前状态------')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el) //undefined
    console.log('%c%s', 'color:red', 'data   : ' + this.$data) //undefined
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  created: function () {
    console.group('------子组件created创建完毕状态------')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el) //undefined
    console.log('%c%s', 'color:red', 'data   : ' + this.$data) //已被初始化
    console.dir(this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message) //已被初始化
    messageTest = '制造错误触发errorCaptured'
  },
  beforeMount: function () {
    console.group('------子组件beforeMount挂载前状态------')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el) //undefined
    console.dir(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data) //已被初始化
    console.log('%c%s', 'color:red', 'message: ' + this.message) //已被初始化
  },
  mounted: function () {
    console.group('------子组件mounted 挂载结束状态------')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el) //已被初始化
    console.dir(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data) //已被初始化
    console.dir(this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message) //已被初始化
  },
  beforeUpdate: function () {
    console.group('子组件beforeUpdate 更新前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.dir(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.dir(this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  updated: function () {
    console.group('子组件updated 更新完成状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.dir(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.dir(this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  beforeDestroy: function () {
    console.group('子组件beforeDestroy 销毁前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.dir(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.dir(this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  destroyed: function () {
    console.group('子组件destroyed 销毁完成状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.dir(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.dir(this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  activated() {
    console.group('------activated缓存阶段，进入组件------')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el) //undefined
    console.log('%c%s', 'color:red', 'data   : ' + this.$data) //undefined
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  deactivated() {
    console.group('------activated缓存阶段，离开或停用当前组件------')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el) //undefined
    console.log('%c%s', 'color:red', 'data   : ' + this.$data) //undefined
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
}
</script>

<style  scoped>
</style>